import React, { useEffect, useRef } from 'react';
import { PageContainer, GridContent } from '@ant-design/pro-layout';
import 'ant-design-pro/dist/ant-design-pro.css';
import { Tag, Space, Col, Row, Card } from 'antd';
import ProList from '@ant-design/pro-list';
import { FormattedMessage } from 'umi';
import { Pie,  WaterWave,ChartCard  } from 'ant-design-pro/lib/Charts';
import {getpiedate} from '@/services/welcome/welcome'
import {connect} from 'umi';
import { currentUser } from '@/services/user/user';
import ProCard from '@ant-design/pro-card';

const dataSource = [
  {
    id: '1',
    name: '语雀的天空',

    desc: '我是一条测试的描述',
  },
  {
    id: '2',
    name: 'Ant Design',

    desc: '我是一条测试的描述',
  },
  {
    id: '3',
    name: '蚂蚁金服体验科技',

    desc: '我是一条测试的描述',
  },
  {
    id: '4',
    name: 'TechUI',

    desc: '我是一条测试的描述',
  },
];




const Welcome = (props) => {
 const actionRef =useRef();
  const {dispatch,currentUser,creatordata,ownerdata}=props;
  console.log(props);


  useEffect(() => {

    dispatch({
      type: 'welcome/creatorItemList',
      payload: { creatorID: currentUser.id ,
      pageSize:100,
        current:0
      }
    });


    dispatch({
      type: 'welcome/ownerItemList',
      payload: { ownerID: currentUser.id ,
        pageSize:100,
        current:0
      }
    });



  }, []);




  //console.log(data[0].status);





  const solddata=[];
  const buydata=[];
  const statuNum = [0,0,0,0,0];
  //const buypercent = (piedata.length/buydata.length)*100;

//判断是否卖出
  for (let i = 0; i < creatordata.length; i += 1) {
    if(creatordata[i].owner.id!=creatordata[i].creator.id){
      solddata.push(creatordata[i])
    }

  }
//判断是否买入
  for (let i = 0; i < ownerdata.length; i += 1) {
    if(ownerdata[i].owner.id!=ownerdata[i].creator.id){
      buydata.push(creatordata[i])
    }

  }




     for (let i = 0; i < ownerdata.length; i += 1) {
       switch (ownerdata[i].status) {
         case 0:
           statuNum[0]= (statuNum[0]+1);
           break;
         case 1:
           statuNum[1]=(statuNum[1]+1);
         case 2:
           statuNum[2]= (statuNum[2]+1);

           break;
         case 3:
           statuNum[3]=(statuNum[3]+1);
           break;
         case 4:
           statuNum[4]=(statuNum[4]+1);
           break;
         default:
       }
     }



  const salesPieData= [
    {
      x: '确权中',
      y: statuNum[0],
    },
    {
      x: '确权完成',
      y: statuNum[1],
    },
    {
      x: '定价交易',
      y: statuNum[2],
    },
    {
      x: '拍卖',
      y: statuNum[3],
    },
    {
      x: '授权',
      y: statuNum[4],
    },

  ];








return (

    <PageContainer>



      <Row
        gutter={24}
        style={{
          marginTop: 24,
        }}
      >

        <ProCard title="我的作品"  split={  'vertical'} bordered headerBordered>
          <ProCard title="交易中作品列表" colSpan="50%">

              <ProList rowKey="id" headerTitle="我的作品"
                       dataSource={ownerdata}
                       showActions="hover"
                       pagination={{
                         defaultPageSize: 5,
                         showSizeChanger: true,
                       }}
                       editable={{
                         onChange: (e) => console.log(e),
                       }} metas={{
                title: {
                  dataIndex: 'name',
                },
                avatar: 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg',

                description: {
                  dataIndex: 'description',
                },
                subTitle: {
                  render: () => {
                    return (<Space size={0}>
                      <Tag color="blue">待出售</Tag>

                    </Space>);
                  },
                },
                actions: {
                  render: (text, row, index, action) => [
                    <a onClick={() => {
                      action === null || action === void 0 ? void 0 : action.startEditable(row.id);
                    }} key="link">
                      编辑
                    </a>,
                  ],
                },
              }} />

          </ProCard>
          <ProCard title="作品比例"  >

              <Pie
                hasLegend
                subTitle='我的作品'


                total={() => (
                  <span
                    dangerouslySetInnerHTML={{
                      __html: (salesPieData.reduce((pre, now) => now.y + pre, 0)),
                    }}
                  />
                )}
                data={salesPieData}
                //valueFormat={val => <span dangerouslySetInnerHTML={{ __html: (val) }} />}
                height={300}
                lineWidth={8}
              />



          </ProCard>
        </ProCard>
      </Row>


      <Row
        gutter={24}
        style={{
          marginTop: 24,
        }}
      >
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
        <Card
          title='卖出的作品'
          bordered='false'
          style={{
            height: '100%',
            weight:'100%',
          }}>
        <div style={{ textAlign: 'center' }}>
          <ChartCard
            title="已卖出"
            avatar={
              <img
                alt="indicator"
                style={{ width: 56, height: 56 }}
                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              />
            }

            total={() => <span dangerouslySetInnerHTML={{ __html: (solddata.length) }} />}
          />
        </div>
        </Card>
        </Col>
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
          <Card
            title='买入的作品'
            bordered='false'
            style={{
              height: '100%',
              weight:'100%',
            }}>
            <div style={{ textAlign: 'center' }}>
              <ChartCard
                title="已买入"
                avatar={
                  <img
                    alt="indicator"
                    style={{ width: 56, height: 56 }}
                    src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                  />
                }

                total={() => <span dangerouslySetInnerHTML={{ __html: (buydata.length) }} />}
              />
            </div>
          </Card>
        </Col>
      </Row>
      </PageContainer>

  );
};

export default connect(({user,welcome}) => ({
  creatordata:welcome.creatordata,
  ownerdata:welcome.ownerdata,
  currentUser: user.currentUser,
  status: welcome.status,
}))(Welcome);
